<template>
  <!-- 签单 -->
  <div class="page">
    <!-- search -->
    <div style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
      <div
        class=""
        @click="popBack()"
      >
        <i
          class="iconfont icon-arrow-left"
          style="font-size: 16px;font-weight: bold;"
        ></i>
        <span style="font-size: 16px;">签单</span>
      </div>
      <div style="margin-left: 12px;
				flex: 1;
				background-color: #FFFFFF;
				display: flex;
				justify-content: flex-end;
				">
      </div>
    </div>
    <!-- body -->
    <div style="flex: 1;overflow-y: auto;padding: 12px;">

      <CheckOrderCourse :info="orderInfo" />

      <!-- 缴纳方式 -->
      <div>
        <div style="font-weight: bold;padding: 12px 0;">缴纳方式</div>
        <van-radio-group
          v-model="orderInfo.buyType"
          direction="horizontal"
        >
          <van-radio name="0">购买课程</van-radio>
          <van-radio name="1">仅购买定金</van-radio>
        </van-radio-group>

        <van-field
          v-model="earnest"
          v-if="orderInfo.buyType==1"
          placeholder="请输入定金金额"
          style="border: 1px solid #ebebeb;margin-top: 12px;"
        />
      </div>

      <!-- 收款 -->
      <div style="padding: 12px 0;">
        <div style="padding: 12px 0;font-weight: bold;">收款方式</div>
        <van-radio-group
          v-model="orderInfo.payType"
          direction="horizontal"
        >
          <van-radio name="0">线上收款</van-radio>
          <van-radio name="1">线下已转账</van-radio>
        </van-radio-group>
      </div>

      <div style="padding: 12px 0;">
        <van-button
          type="info"
          block
          @click="nextHandle"
          style="box-shadow: none;border: none;"
        >
          下一步</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import CheckOrderCourse from "./personinfo-checkorder-course.vue";
export default {
  components: {
    CheckOrderCourse,
  },
  data() {
    return {
      orderInfo: {
        buyType: "0", //0课程 1定金
        payType: "0", //0 线上 1线下，
        useSpe: false, //是否使用特殊优惠
        speNum: "", //特殊优惠值
        earnest: "", //定金
      },
    };
  },
  methods: {
    selectCorse() {
      this.$router.push({
        path: "/personinfo-select-project",
      });
    },
    nextHandle() {
      let { payType } = this.orderInfo;
      if (payType == "0") {
        this.$router.push({
          path: "/personinfo-checkorder-online",
        });
      } else {
        this.$router.push({
          path: "/personinfo-checkorder-offline",
        });
      }
    },
    popBack() {
      sessionStorage.removeItem("selected-course");
      this.$router.back({});
    },
  },
};
</script>

<style scoped>
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>